<template>
  <div @mouseover="mouseover" class="form-relation-render">
    <slot name="centerNode"/>
    <div class="common-node-wrapper" data-role="node" :data-node="`${item.key}`"
         :style="getCommonNodeStyle(index)"
         v-for="(item, index) in nodes">
      <slot name="node" :node="item"></slot>
    </div>

    <div v-for="(item, index) in nodes" :data-node="`${item.key}`" data-role="node"
         class="form-relation-render-line-icon"
         :style="getLineIconStyle(index)">
      <slot name="lineIcon" :node="item"/>
    </div>

    <div class="form-relation-line" v-for="(item, index) in nodes"
         :style="getLineStyle(index)" :id="`line-${item.key}`">

<!--      左代表关联-->
      <svg t="1720233328672" v-show="hasRelationArrow(item)" class="icon left" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           p-id="4286" width="200" height="200">
        <path
            d="M337.454545 232.727273v558.545454a34.909091 34.909091 0 0 0 58.600728 25.669818l302.545454-279.272727a35.025455 35.025455 0 0 0 0-51.339636l-302.545454-279.272727A34.909091 34.909091 0 1 0 337.454545 232.727273"
            fill="#d8d8d8" p-id="4287"></path>
      </svg>

      <!--      左代表触发-->
      <svg t="1720233328672" v-show="hasTriggerArrow(item)" class="icon right" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg"
           p-id="4286" width="200" height="200">
        <path
            d="M337.454545 232.727273v558.545454a34.909091 34.909091 0 0 0 58.600728 25.669818l302.545454-279.272727a35.025455 35.025455 0 0 0 0-51.339636l-302.545454-279.272727A34.909091 34.909091 0 1 0 337.454545 232.727273"
            fill="#d8d8d8" p-id="4287"></path>
      </svg>
    </div>
  </div>
</template>
<script>
import $ from 'jquery';
import {createProps} from '@/utils';

export default {
  name: 'FormRelationRender',
  props: {
    nodeConfig: {
      type: Object,
      default: () => ({
        width: 140,
        height: 50,
        distance: 300
      })
    },
    hasRelationArrow: createProps(Function, () => false),
    hasTriggerArrow: createProps(Function, () => false),
    centerNode: {
      type: Object,
      default: () => undefined
    },
    nodes: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    mouseover({target}) {
      let count = 10;
      while (count-- > 0 && target && $(target).attr('data-role') !== 'node') {
        target = target.parentNode;
      }
      $('.form-relation-line-active').removeClass('form-relation-line-active');
      if (target) {
        $(`#line-${$(target).attr('data-node')}`).addClass('form-relation-line-active');
      }
    },
    getCommonNodeStyle(index) {
      let {x, y} = this.getNodePosition(index);
      return {
        transform: `translate(${x}px,${y}px)`
      };
    },
    getLineStyle(index) {
      let {x, y} = this.getNodePosition(index);
      let width = Math.sqrt(x * x + y * y);

      let deg = Math.asin(y / width) / Math.PI * 180;
      if (x < 0) deg = 180 - deg;

      return {
        width: `${Math.ceil(width)}px`,
        transformOrigin: '0 0',
        transform: `rotate(${deg}deg)`
      };
    },
    getLineIconStyle(index) {
      let {x, y} = this.getNodePosition(index);
      return {
        transform: `translate(${x / 2}px,${y / 2}px)`
      };
    },
    getNodePosition(index) {
      if (this.nodes.length > 12) {
        let rowSpan = 68, colSpan = 280;
        if (index < (this.nodes.length / 2)) {
          //在左边
          let mid = (this.nodes.length / 4) - 0.5;
          let span = index - mid;
          return {
            x: -colSpan,
            y: span * rowSpan
          };
        } else {
          //在右边
          let mid = (this.nodes.length / 4) - 0.5;
          let span = index - this.nodes.length / 2 - mid;
          return {
            x: colSpan,
            y: span * rowSpan
          };
        }
      }

      let distance = this.nodeConfig && this.nodeConfig.distance || 300;
      let x = Math.cos(Math.PI * 2 * (index / this.nodes.length)) * distance;
      let y = Math.sin(Math.PI * 2 * (index / this.nodes.length)) * (distance - 80) * -1;
      return {x, y};
    },
  }
};
</script>
<style>
.form-relation-render {
  width: 0;
  height: 0;
  overflow: visible;
  position: absolute;
  left: 50%;
  top: 50%;
}

.common-node-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.form-relation-line {
  min-width: 200px;
  height: 1px;
  background: #d8d8d8;
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  text-align: center;
}

.form-relation-line-active .icon path {
  fill: #1f85ec !important;
}

.form-relation-line-active {
  background: #1f85ec;
}

.form-relation-line .icon {
  width: 25px;
  height: 25px;
  display: block;
  left: 65%;
  top: -12px;
  position: absolute;
}

.form-relation-line .left {
  left: 30%;
  transform: rotate(180deg);
}

.form-relation-render-line-icon {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}
</style>